<template>
  <div class="agency">
    <ContentWrap>
      <FormContainer :column="4">
        <el-form ref="agencyForm" :model="formData" :rules="formRules" label-width="90px">
          <el-form-item prop="officeCode" label="办事处编码">
            <el-input v-model="formData.officeCode" placeholder="请输入办事处编码" clearable />
          </el-form-item>
          <el-form-item prop="officeName" label="办事处名称">
            <!-- <CustomSelectPicker
              url="/call-center/api/v1/mscInfo/office/ref/page"
              placeholder="请输入办事处名称"
              :immediate="true"
              :remote="true"
              params-type="query"
              bind-name="name"
              bind-value="name"
              find-field="name"
              :echo-value.sync="formData.officeName"
            ></CustomSelectPicker> -->
            <el-input v-model="formData.officeName" placeholder="请输入办事处名称" clearable />
          </el-form-item>
          <el-form-item prop="officeType" label="办事处类型">
            <el-select v-model="formData.officeType" clearable placeholder="请选择办事处类型">
              <el-option :value="1" label="直营办" />
              <el-option :value="2" label="独资办" />
            </el-select>
          </el-form-item>
          <el-form-item align="right">
            <Button @click="resetClick('agencyForm')">重置</Button>
            <Button type="primary" :loading="loading" enter @click="searchClick('agencyForm')">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <table-box
        ref="agencyTable"
        :no-request="true"
        :table-config="agencyTableConfig"
        :other-filters="filtersParams"
        @select="checkBoxChange"
      />
      <agencySearch :toggle="searchBox" :row="currentAgency" @modelClose="modelClose" />
    </ContentWrap>
  </div>
</template>

<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import AgencySearch from './component/agencySearchModel'
import { JsonToUrl } from '@/utils/params-format'
export default {
  name: 'InfoDataAgency',
  components: {
    ContentWrap,
    FormContainer,
    Button,
    AgencySearch
  },
  data() {
    return {
      testValue: '',
      loading: false,
      formData: {
        officeCode: '', // 办事处编码
        officeName: '', // 办事处名称
        officeType: '' // 办事处类型
      },
      formRules: {},
      url: '/call-center/api/v1/mscInfo/office/page',
      agencyTableConfig: {
        interfacePath: '',
        pageFlag: true,
        hideFuncBar: true,
        // 表格字段信息配置
        setting: [
          {
            prop: 'code',
            label: '办事处编码',
            width: 120
          }, {
            prop: 'name',
            label: '办事处名称'
          }, {
            prop: 'officeTypeName',
            label: '办事处类型',
            width: 120
          }, {
            prop: 'officeAddr',
            label: '办事处地址',
            formatData: (val) => {
              if (val.officeAddr) return val.officeAddr
              return '--'
            }
          }, {
            prop: 'contact',
            label: '负责人',
            width: 100,
            formatData: (val) => {
              if (val.contact) return val.contact
              return '--'
            }
          }, {
            prop: 'contactPhone',
            label: '负责人电话'
          }, {
            label: '客户经理',
            align: 'center',
            width: 100,
            button: [{
              name: '查询',
              clickFun: this.searchDetail,
              type: 'primary'
            }]
          }
        ]
      },
      filtersParams: [],
      searchBox: false,
      currentAgency: {}
    }
  },
  created() {
  },
  mounted() {
    this.agencyTableConfig.interfacePath = this.url
  },
  methods: {
    /**
     * 提交查询
     */
    searchClick(formName) {
      this.loading = true
      this.$refs[formName]
        .validate()
        .then((valid) => {
          if (valid) {
            const params = JsonToUrl(this.formData)
            if (!params) {
              this.$message({
                message: '请至少输入一项查询条件',
                type: 'warning'
              })
              return
            }
            this.agencyTableConfig.interfacePath = `${this.url}${params}`
            this.$nextTick(() => {
              this.$refs.agencyTable.initTableData()
            })
          } else {
            return false
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    /**
     * 重置搜索框
     */
    resetClick(formName) {
      this.$refs[formName].resetFields()
    },
    /**
     * 查询客户经理
     */
    searchDetail(row) {
      this.currentAgency = row
      this.searchBox = true
    },
    checkBoxChange(selection, row) {
      // console.log(selection, row)
    },
    modelClose() {
      this.searchBox = false
    }
  }
}
</script>

<style lang="scss" scoped>
.agency {}
</style>
